<template>
  <div class="header">
    <var-icon @click="router.back()" :size="26" name="chevron-left" />
    <var-input
      clearable
      autofocus
      variant="outlined"
      size="small"
      placeholder="搜索景点"
      v-model="keywords"
      @keydown.enter="handleSearch"
    >
      <template #append-icon>
        <var-icon name="magnify" />
      </template>
    </var-input>
  </div>

  <var-list
    v-if="showResult"
    :finished="isLoadAll"
    v-model:loading="loading"
    @load="loadMore"
  >
    <div class="list-content">
      <div
        class="scenic"
        @click="toDetail(item.id)"
        v-for="item in dataList"
        :key="item.id"
      >
        <img
          width="80px"
          height="100px"
          fit="cover"
          :src="item.scenic_img[0]"
        />

        <div class="right">
          <var-ellipsis :tooltip="false" class="title">{{
            item.spot
          }}</var-ellipsis>
          <var-ellipsis :tooltip="false" class="desc" :line-clamp="3">{{
            item.desc
          }}</var-ellipsis>
          <var-ellipsis :tooltip="false" class="footer">{{
            item.addr
          }}</var-ellipsis>
        </div>
      </div>
    </div>

    <var-back-top :duration="300" :bottom="80" />
  </var-list>

  <div v-else class="history">
    <div class="title">
      <span>历史搜索</span>
      <div @click="infoStore.historyList = []" class="right">
        <var-icon name="trash-can" />清空
      </div>
    </div>

    <var-space>
      <var-chip
        @click="research(item)"
        v-for="item in infoStore.historyList"
        :key="item"
        >{{ item }}</var-chip
      >
    </var-space>
  </div>
</template>

<script setup lang="ts">
import { useListLoad } from '@/hooks/useListLoad'
import { getScenicList } from '@/api'
import { useInfoStore } from '@/store/info'
import { debounce } from '@/utils'

const router = useRouter()
const infoStore = useInfoStore()
const showResult = ref(false)

const handleSearch = debounce(() => {
  showResult.value = true
  getData(true)
  infoStore.historyList = [
    ...new Set([keywords.value, ...infoStore.historyList])
  ]
})

const research = item => {
  keywords.value = item
  handleSearch()
}

const getData = async (reset = false) => {
  reset && resetFn()
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    spot: keywords.value
  }
  loading.value = true
  const res = await getScenicList(params)
  dataList.value = dataList.value.concat(res.list)
  isLoadAll.value = !!(res.total <= dataList.value.length)
  loading.value = false
}

const {
  keywords,
  loading,
  dataList,
  pageNum,
  pageSize,
  isLoadAll,
  reset: resetFn,
  loadMore
} = useListLoad(getData)

watch(keywords, val => {
  !val && (showResult.value = false)
})

const toDetail = id => {
  router.push('/scenic-detail/' + id)
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  .var-input {
    flex: 1;
  }
}

.list-content {
  margin-top: 10px;

  .scenic {
    display: flex;
    margin-bottom: 5px;
    background-color: #f7f7f7;

    img {
      flex: 1;
      width: 80px;
      height: 120px;
      object-fit: cover;
      margin-right: 5px;
    }

    .right {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      .desc {
        font-size: 14px;
        color: #666;
      }
      .footer {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.history {
  margin-top: 10px;
  padding: 10px;

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .right {
      display: flex;
      align-items: center;
      color: #666;
      .var-icon {
        margin-right: 5px;
      }
    }
  }
}
</style>
